<template>
	<view class="container">
		<!-- 记录列表 -->
		<scroll-view class="record-list" scroll-y>
			<view v-if="records.length === 0" class="empty-state">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无提现记录</text>
			</view>
			<view v-else class="record-item" v-for="(item, index) in records" :key="index">
				<view class="record-left">
					<text class="record-title">提现到微信</text>
					<text class="record-time">{{item.createAt}}</text>
				</view>
				<view class="record-right">
					<view v-if="item.status == 1" class="receive-btn" @click="handleReceive(item)">
						<text>领取</text>
					</view>
					<text class="record-amount" :class="{
						'reviewing': item.status == 3,
						'success': item.status == 2,
						'pending': item.status == 1,
						'failed': item.status == 0
					}">
						¥{{item.amount}}
					</text>
					<text class="record-status" :class="{
						'reviewing': item.status == 3,
						'success': item.status == 2,
						'pending': item.status == 1,
						'failed': item.status == 0
					}">
						{{getStatusText(item.status)}}
					</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部说明 -->
		<view class="bottom-tips">
			<text>说明：提现金额将在1-3个工作日内到账</text>
		</view>
	</view>
</template>

<script>
	import {
		getWithdrawList,
		setWithdraw,
		postWithdraw
	} from "@/request/API.js"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				records: []
			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.init();
		},
		methods: {
			async withdraw(id) {
				let that = this;
				let withdraw = await postWithdraw(id);
				if (wx.canIUse('requestMerchantTransfer')) {
					wx.requestMerchantTransfer({
						mchId: withdraw.data.mchId, // 商户号
						appId: withdraw.data.appId, // appId
						package: withdraw.data.packageInfo, // 商家转账付款单跳转收款页package信息
						success: (res) => {
							that.init() // 刷新列表
							uni.showToast({
								title: '领取成功',
								icon: 'success'
							})

						},
						fail: (res) => {
							console.log('fail:', res);
						},
					});
				} else {
					wx.showModal({
						content: '你的微信版本过低，请更新至最新版本。',
						showCancel: false,
					});
				}
			},
			async init() {
				const {
					data
				} = await getWithdrawList(uni.getStorageSync("userId"));
				this.records = data;
			},
			goBack() {
				uni.navigateTo({
					url: "/pages/cy-earnings/cy-earnings"
				})
			},
			getStatusText(status) {
				const statusMap = {
					3: '提现失败',
					2: '提现成功',
					1: '待领取',
					0: '审核中'
				}
				return statusMap[status] || ''
			},
			handleReceive(item) {
				let that = this;
				uni.showModal({
					title: '领取确认',
					content: `确定要领取 ¥${item.amount} 吗？`,
					success: async (res) => {
						if (res.confirm) {
							await that.withdraw(item.id);
							that.init();
						}
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f7f8fa;
	}

	.nav-bar {
		background: #fff;
		border-bottom: 1px solid #f5f5f5;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.left-icon {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		margin-right: 44px;
	}

	.record-list {
		padding: 30rpx;
		margin-top: 0rpx;
		height: calc(100vh - 44px - var(--status-bar-height) - 100rpx);
		box-sizing: border-box;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 260rpx;
	}

	.empty-state image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}

	.empty-state text {
		font-size: 28rpx;
		color: #999;
		letter-spacing: 1px;
	}

	.record-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 36rpx;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s;
	}

	.record-item:active {
		transform: scale(0.98);
		opacity: 0.9;
	}

	.record-left {
		display: flex;
		flex-direction: column;
	}

	.record-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
		letter-spacing: 0.5px;
	}

	.record-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.record-amount {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 12rpx;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	}

	.record-amount.receivable {
		color: #ff9900;
	}

	.record-amount.reviewing {
		color: #8a2be2;
	}

	.record-amount.success {
		color: #07c160;
	}

	.record-amount.pending {
		color: #1989fa;
	}

	.record-amount.failed {
		color: #ff2442;
	}

	.record-status {
		font-size: 26rpx;
		padding: 4rpx 0rpx;
		border-radius: 20rpx;
		letter-spacing: 1px;
	}

	.record-status.receivable {
		color: #ff9900;
		/* background: rgba(255, 153, 0, 0.1); */
	}

	.record-status.reviewing {
		color: #8a2be2;
		/* background: rgba(138, 43, 226, 0.1); */
	}

	.record-status.success {
		color: #07c160;
		/* background: rgba(7, 193, 96, 0.1); */
	}

	.record-status.pending {
		color: #1989fa;
		/* background: rgba(25, 137, 250, 0.1); */
	}

	.record-status.failed {
		color: #ff2442;
		/* background: rgba(255, 36, 66, 0.1); */
	}

	.receive-btn {
		background: linear-gradient(to right, #ff9900, #ff6b6b);
		padding: 8rpx 24rpx;
		border-radius: 28rpx;
		margin-bottom: 12rpx;
	}

	.receive-btn text {
		color: #fff;
		font-size: 26rpx;
		font-weight: 500;
	}

	.receive-btn:active {
		opacity: 0.9;
	}

	.bottom-tips {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx;
		background: #fff;
		text-align: center;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.bottom-tips text {
		font-size: 26rpx;
		color: #666;
		letter-spacing: 0.5px;
	}
</style>